<template>
  <div class="staytime-charts-components">
    <div class="staytime-charts-wrapper">
      <h5 class="chart-title">
        停留时间
      </h5>
      <chart :options="options"
             :init-options="initOptions"
             auto-resize
             class="echarts-item">
      </chart>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import ECharts from 'vue-echarts/components/ECharts.vue'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/graphic'
import 'echarts/lib/chart/bar'
import options from './echartsOptions.js'

const DEFAULT_AGE_UNIT = '岁'

export default {
  name: 'staytime-charts-components',
  components: {
    chart: ECharts
  },
  data () {
    return {
      options,
      initOptions: {
        renderer: 'canvas'
      }
    }
  },
  props: {
    residenceTime: {
      default: null
    }
  },
  watch: {
    'residenceTime': function () {
      let initOptions = options
      // [1]代表男性  [2]代表女性
      if (this.residenceTime) {
        let AgeX = this.residenceTime[1].map((item) => item.ageRange)
        let ageRange = []
        for (var i = 0; i <= AgeX.length - 1; i++) {
          let label = ''
          if (i === 0) {
            label = '小于' + (parseInt(AgeX[i].slice(AgeX[i].indexOf('-') + 1)) + 1) + DEFAULT_AGE_UNIT
          } else if (i === AgeX.length - 1) {
            label = '大于' + (AgeX[i].slice(0, AgeX[i].indexOf('-'))) + DEFAULT_AGE_UNIT
          } else {
            label = AgeX[i] + DEFAULT_AGE_UNIT
          }
          ageRange.push(label)
        }
        if (this.residenceTime[1].some((item) => item.value !== 0) || this.residenceTime[2].some((item) => item.value !== 0)) {
          let maleY = this.residenceTime[1].map((item) => item.value)
          let femaleY = this.residenceTime[2].map((item) => item.value)
          initOptions.xAxis[0]['data'] = ageRange
          initOptions.series[0]['data'] = maleY
          initOptions.series[1]['data'] = femaleY
          initOptions.legend.data = ['男性', '女性']
        } else {
          initOptions.xAxis[0]['data'] = []
          initOptions.series[0]['data'] = []
          initOptions.series[1]['data'] = []
          initOptions.legend.data = []
        }
      } else {
        initOptions.xAxis[0]['data'] = []
        initOptions.series[0]['data'] = []
        initOptions.series[1]['data'] = []
        initOptions.legend.data = []
      }
      /**
       * [if description] 如果没有图表数据的时候, 显示tooltip
       * @param  {Number} initOptions.series[0]['data'].length [description]
       */
      initOptions.graphic[0]['style']['fill'] = (
        initOptions.series[0]['data'].length === 0 && initOptions.series[1]['data'].length === 0
      ) ? '#000' : 'transparent'
      return initOptions
    }
  }
}

</script>

<style lang="less" rel="stylesheet/less" scoped>
  // scoped
  .staytime-charts-components {
    width:50%;
    height:350px;
    .staytime-charts-wrapper {
      height:330px;
      .chart-title {
        margin:0;
        box-sizing: border-box;
        /* padding-left: 30px; */
        font-size: 14px;
        line-height: 28px;
        .text-unit{
          font-size: 12px;
          color: #888;
          font-weight: 400;
          padding-left: 5px;
        }
      }
      .echarts-item {
        width: 100%;
        height:330px;
        overflow: hidden;
      }
    }
  }
</style>
